<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>开始<tton>
        <div class="boy">孤岛</div>
        <div class="girl">春哥</div>
        <script>
            function animate(obj,target,callback){
                console.log(callback);
                clearInterval(obj.time)
                obj.time = setInterval(function(){
                    var step = (target - obj.offsetLeft) /10
                    step > 0 ? Math.ceil(step):Math.floor(step)
                    if(obj.offsetLeft == target){
                        clearInterval(obj.time)
                        if(callback){
                            callback()
                        }
                    }
                        obj.style.left = obj.offsetLeft + step +'px' 
                    
                },30)
            }
            var boy= document.querySelector('.boy')
            var girl= document.querySelector('.girl')
            var btn= document.querySelector('button')
           btn.addEventListener('click',function(){
            animate(girl,1000,function(){
                    alert('我在湖北等你')
                })
               
                setTimeout(function(){
                    animate(boy,1000,function(){
                        alert('我来了')
                    })
                  
                },1000)
           })
           </script>
</body>
</html>